<template>
  <div class="recordDetail">
    <Navbar appTitle="报修详情" />
    <!--头部-->
    <div class="d-heads">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.createByText }}提交的新建报修</div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">{{ detailInfo.repairCode }}</span>
          </div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel"
              >{{ detailInfo.createByText }}，{{
                detailInfo.createTime
              }}提交</span
            >
          </div>
          <div class="status" :style="{ color: setColor(detailInfo) }">
            {{ detailInfo.statusText }}
          </div>
        </div>
        <div class="right">
          <img
            class="rightImg"
            v-if="detailInfo.flowStatus == 'RUNNING'"
            src="@/assets/img/shenpizhong.png"
            alt=""
          />
          <img
            class="rightImg"
            v-if="detailInfo.flowStatus == 'AGREE'"
            src="@/assets/img/yitongguo.png"
            alt=""
          />
          <img
            class="rightImg"
            v-if="detailInfo.flowStatus == 'REFUSE'"
            src="@/assets/img/yijujue.png"
            alt=""
          />
          <img
            class="rightImg"
            v-if="detailInfo.flowStatus == 'TERMINATED'"
            src="@/assets/img/yichehui.png"
            alt=""
          />
        </div>
      </div>
      <div style="background: #fff">
        <div style="width: 100%">
          <van-tabs
            style="width: 3rem; margin: 0 0 0rem -0.11rem"
            v-model="tabActive"
          >
            <van-tab title="故障报修信息"></van-tab>
            <van-tab title="维修结果信息"></van-tab>
            <van-tab title="维修记录信息"></van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f" :style="{ paddingBottom: apply ? '0.6rem' : '0' }">
      <div class="infoTopBox" v-show="tabActive == 0">
        <div class="itemTopInfo">
          <span class="spanLeft">故障设备：</span
          ><span class="spanRight"
            >{{ detailInfo.deviceCode || "--" }}-{{
              detailInfo.deviceName || "--"
            }}</span
          >
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">{{ "设备类别" }}：</span
          ><span class="spanRight">{{
            detailInfo.deviceCategoryText || "--"
          }}</span>
        </div>
      </div>
      <div class="infoTopBox" v-show="tabActive == 0">
        <div class="itemTopInfo">
          <span class="spanLeft">紧急程度：</span
          ><span class="spanRight">{{ detailInfo.urgencyText || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">发生时间：</span
          ><span class="spanRight">{{ detailInfo.happenTime || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">故障描述：</span
          ><span class="spanRight">{{
            detailInfo.faultDescription || "--"
          }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">图片：</span
          ><span class="spanRight">
            <upload
              class="fileclass"
              iconType="fj"
              :fileIds="detailInfo.attachment"
              :showUpload="false"
            ></upload>
          </span>
        </div>
      </div>
      <div class="infoTopBox" v-show="tabActive == 1">
        <div class="itemTopInfo">
          <span class="spanLeft">故障类别：</span
          ><span class="spanRight">{{ resultVo.faultCategory || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">故障原因：</span
          ><span class="spanRight">{{ resultVo.faultReason || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">维修描述：</span
          ><span class="spanRight">{{
            resultVo.repairDescription || "--"
          }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">图片：</span
          ><span class="spanRight">
            <upload
              class="fileclass"
              iconType="fj"
              :fileIds="resultVo.attachment"
              :showUpload="false"
            ></upload>
          </span>
        </div>
      </div>
      <div class="infoTopBox" v-show="tabActive == 1">
        <div class="itemTopInfo">
          <span class="spanLeft">维修开始时间：</span
          ><span class="spanRight">{{ resultVo.repairStartTime || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">维修结束时间：</span
          ><span class="spanRight">{{ resultVo.repairEndTime || "--" }}</span>
        </div>
        <div class="itemTopInfo">
          <span class="spanLeft">维修人：</span
          ><span class="spanRight">{{ resultVo.realname || "--" }}</span>
        </div>
      </div>
      <van-steps
        direction="vertical"
        :active="0"
        v-show="tabActive == 2"
        style="margin-top: 0.1rem"
      >
        <!-- <div> -->
        <van-step v-for="(item, i) in detailInfo.recodeInfoVoList" :key="i">
          <div class="step-title">{{ item.operationType }}</div>
          <div class="step-text">
            <div>{{ item.createBy }}</div>
            <div style="width: 2.6rem">{{ item.createTime }}</div>
          </div>
          <div v-for="(t, j) in item.digest" :key="j">
            <div class="step-text" v-for="(value, key) in t" :key="key">
              <!-- <span></span> -->
              <div>{{ `${key}：` }}{{ value ? value : "--" }}</div>
            </div>
          </div>
        </van-step>
        <!-- </div> -->
      </van-steps>
      <!--审批流程 -->
      <div style="margin-top:0.1rem" v-if="detailInfo.flowInstId">
        <!-- <div class="otherTaps"> -->
          <!-- <div class="title">
            <span class="icon"></span>
            <span class="content">审批流程</span>
          </div> -->
          <!-- ids="MESS_DEVICE_REPAIR" -->
          <Examine
            v-if="detailInfo.flowInstId"
            type="2"
            :id="detailInfo.flowInstId"
            ref="examine"
          />
        <!-- </div> -->
      </div>
    </div>
    <div class="search-bottom" v-if="apply">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { queryInfoById } from "@/api/system";
import upload from "@/components/upload/upload";
import { getEnableOne } from "@/api/api";
import Examine from "@/components/examine";
export default {
  components: { Navbar, upload, Examine },
  data() {
    return {
      tabActive: 0,
      parentId: "",
      detailInfo: {},
      resultVo: {},
      apply: false,
      showFLow: true,
    };
  },
  computed: {},
  mounted() {},
  created() {
    if (this.$route.query.applyType) {
      this.apply = true;
    }
    this.parentId = this.$route.query.id;
    this.getDetail();
    this.isShowFLow();
  },
  methods: {
    /* 状态颜色 */
    setResultColor(item) {
      let colors = {
        0: "#00a854",
        1: "#f04134",
      };
      return colors[item["checkResults"]] || "";
    },
    setColor(item) {
      let colorStr = "";
      switch (item.status) {
        case "not_effective":
          colorStr = "#ff4d4f";
          break;
        case "wait_receipt":
          colorStr = "#191f25";
          break;
        case "repairing":
          colorStr = "#1890ff";
          break;
        case "wait_verify":
          colorStr = "#ff943e";
          break;
        case "completed":
          colorStr = "#00b042";
          break;
      }
      return colorStr;
    },
    // 获取详情
    getDetail() {
      queryInfoById({ id: this.parentId }).then((res) => {
        if (res.success) {
          if (res.result) {
            this.detailInfo = res.result;
            this.resultVo = res.result.resultVo;
            if (
              this.$route.query.applyType == "waiterDeal" &&
              this.detailInfo.flowStatus == "RUNNING"
            ) {
              this.apply = true;
            }
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    isShowFLow() {
      getEnableOne({ id: "MESS_DEVICE_REPAIR", type: "add" }).then((res) => {
        if (res.result && res.result == "false") {
          this.showFLow = false;
        } else {
          this.showFLow = true;
        }
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
// 盘点物品样式

.left {
  width: 3.4rem !important;
}
.recordDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .d-heads {
    padding: 0.16rem 0.16rem 0 0.16rem;
    background: #ffffff;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 2.8rem;
        // border: 1px solid red;
        .title {
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 0.22rem;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 0.1rem;
        }
      }
      .right {
        // border: 1px solid red;
        width: 0.6rem;
        .rightImg {
          display: block;
          width: 0.55rem;
          height: 0.55rem;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }
}
.tabs-f {
  flex: 1;
  overflow-y: auto;
}
.infoTopBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  .itemTopInfo {
    position: relative;
    margin-top: 0.1rem;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    &:nth-child(1) {
      margin-top: 0;
    }
    .spanLeft {
      white-space: nowrap;
    }
    .spanRight {
      flex: 1;
      color: #191f25;
      /deep/.filerows2 {
        padding-bottom: 0;
      }
      /deep/.filerows2:nth-of-type(n + 2) {
        padding-top: 0.15rem;
      }
    }
  }
}
div.infoBotBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  div.remarkBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    margin-bottom: 0.1rem;
    div.leftRemark {
      width: 0.7rem;
    }

    div.rightRemark {
      flex: 1;
      color: #191f25;
    }
  }
}
div.goodBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.06rem 0;
  img.goodLeft {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.02rem;
  }

  div.goodRight {
    flex: 1;
    margin-left: 0.1rem;
    div.gooodName {
      width: 90%;
      font-size: 0.16rem;
      font-weight: 500;
      color: #191f25;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }

    div.gooodCode {
      position: relative;
      margin-bottom: 0.1rem;
      span.codeBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.goodAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.goodSpec {
      margin-bottom: 0.1rem;
      span.specBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.specAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.numberBox {
      box-sizing: border-box;
      padding: 0.1rem 0;
      border-top: 0.01rem solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.numTopBox {
        flex: 1;
        div.topTop {
          font-size: 0.14rem;
          color: #888888;
          margin-bottom: 0.1rem;
        }

        div.topBot {
          font-size: 0.16rem;
          color: #191f25;
        }
      }
    }
  }
}
.limitRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .limitColumn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // color: #1890ff;
  }
}
/deep/.van-tabs__line {
  width: 85px;
}
.status {
  margin-right: 0.1rem;
}
.icon {
  display: inline-block;
  width: 0.03rem;
  height: 0.14rem;
  background: #1890ff;
  position: absolute;
  left: -0.1rem;
  top: 0.06rem;
}
.listClass {
  padding: 0 0.16rem 0 0.16rem !important ;
}
.step-title {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #191f25;
}
.step-text {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  display: flex;
  justify-content: space-between;
  margin-top: 0.05rem;
  div {
    word-break: break-all;
  }
  div:nth-child(1n) {
    flex: 1;
  }
  div:nth-child(2n) {
    text-align: right;
  }
}
</style>
